<template>
	<view class="login">
		<image class="avatar" :src="avatar"></image>

		<view class="form">
			<view class="item">
				<view class="left">
					头像
				</view>
				<view></view>
				<view class="right">
					<!--<input :value="name" style="text-align:right" placeholder="请选择"/>-->
					<!-- <u-upload :custom-btn="true" :action="uploadUrl" @on-success="onUploadCover">
						<view slot="addBtn" class="f-row r-center c-center">
							<u-icon name="photo" size="30"></u-icon>
							<text>添加封面</text>
						</view>
					</u-upload> -->
					<button class="avatar_button" type="default" plain="true" style="border:none;"
						open-type="chooseAvatar" @chooseavatar="chooseAvatar">
						选择
					</button>
					<!--              <view class="text">请选择</view>-->
					<image class="image" src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/arrow_right.png"></image>
				</view>
			</view>
			<view class="item">
				<view class="left">
					昵称
				</view>

				<view class="right">
					<input v-model="name" type="nickname" style="text-align:right" placeholder="微信名称" />
					<image class="image" src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/arrow_right.png"></image>
				</view>
			</view>
			<view class="item">
				<view class="left">
					手机号
				</view>
				<view></view>
				<view class="right">
					<input name="mobile" v-model="mobile" @input="inputMobile" type="number" style="text-align:right"
						placeholder="正确手机号" />

					<image class="image" src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/arrow_right.png"></image>
				</view>
			</view>
			<button type="primary" @click="submit" class="button">
				立即登陆
			</button>
		</view>
		<!-- <privacy-popup ref="privacyComponent"></privacy-popup> -->
	</view>
</template>

<script lang="js">
	export default {
		name: 'Login',

		components: {},

		mixins: [],

		props: {},

		data() {
			return {
				avatar: "http://sni1muz85.hd-bkt.clouddn.com/img/index/head.png",
				name: "",
				mobile: "",
				openId: ""
			}
		},

		computed: {},

		watch: {},

		onLoad() {
			// this.$api.request({
			// 	url: this.$api.getInfo,
			// }).then(res => {
			// 	console.log(res)
			// 	this.avatar = res.data.avatar ? res.data.avatar : "http://sni1muz85.hd-bkt.clouddn.com/img/index/head.png"
			// 	this.name = res.data.name
			// 	this.mobile = res.data.mobile
			// })
		},
		created() {},

		methods: {
			handleAgreePrivacyAuthorization(e) {
				console.log()
			},
			inputMobile(e) {
				console.log(e)
				this.mobile = e.detail.value
			},
			validatePhoneNumber(phoneNumber) {
				if (phoneNumber.length !== 11) {
					return false;
				}
				var reg = /^1\d{10}$/;
				return reg.test(phoneNumber);
			},
			submit() {
				console.log(this.mobile)
				if (!this.validatePhoneNumber(this.mobile)) {
					wx.showToast({
						title: '手机号格式错误',
						icon: 'error',
						duration: 1000
					})
					return;
				}
				if (!this.name) {
					wx.showToast({
						title: '获取昵称',
						icon: 'error',
						duration: 1000
					})
					return
				}
				if (this.name.length > 16) {
					wx.showToast({
						title: '名称过长',
						icon: 'error',
						duration: 1000
					})
					return
				}
				if (!this.avatar || this.avatar == "http://sni1muz85.hd-bkt.clouddn.com/img/index/head.png") {
					wx.showToast({
						title: '请上传头像',
						icon: 'error',
						duration: 1000
					})
					return
				}
				this.getCode();
			},
			handleOpenPrivacyContract() {
				// 打开隐私协议页面
				wx.openPrivacyContract({
					success: () => {}, // 打开成功
					fail: () => {}, // 打开失败
					complete: () => {}
				})
			},
			async chooseAvatar(e) {
				let avatarUrl = e.detail.avatarUrl;
				uni.uploadFile({
					url: this.$api.uploadImg,
					filePath: avatarUrl,
					name: 'file',
					success: res => {
						let data = JSON.parse(res.data);
						this.avatar = data.url;
					},
					fail: error => {
						console.log(error);
					}
				});
			},
			getCode() {
				let that = this;
				uni.showLoading({
					mask: true
				})
				setTimeout(function() {
					wx.hideLoading()
				}, 2000)
				wx.login({
					success(res) {
						if (res.code) {
							//发起网络请求
							that.$api.request({
								url: that.$api.auth,
								data: {
									appid: that.$appId,
									code: res.code
								}
							}).then(result => {
								//如果返回tokenInfo证明有登陆信息
								//如果没有即是新用户
								that.getCodeData = result.data
								//openId: "oaKyD6zehGck6WZFL9cQchHZEuu0"
								//sessionKey: "I9d5KN2lBO+8r7m3JgZTig=="
								that.$store.state.wxUserInfo = result.data

								if (!result.data.tokenInfo) {
									console.log("没有授权")
									// that.isNewUser=true
									that.getLogin()
								} else {
									let token = result.data.tokenInfo.tokenValue;
									that.$store.state.token = token
									uni.setStorageSync("token", token)
									wx.hideLoading()
									that.$api.request({
										url: that.$api.appPv,
									})
									that.getUserId();
								}
							})
						}
					}
				})
			},
			getLogin() {
				let data = this.$store.state.wxUserInfo;
				let that = this;
				wx.getUserInfo({
					success: function(res) {
						var userInfo = res.userInfo
						var nickName = userInfo.nickName
						var avatarUrl = userInfo.avatarUrl
						var gender = userInfo.gender //性别 0：未知、1：男、2：女
						var province = userInfo.province
						var city = userInfo.city
						var country = userInfo.country
						let openId = that.getCodeData.openId
						//解密信息
						that.$api.request({
							url: that.$api.info,
							method: "POST",
							data: {
								"openId": openId,
								"appid": that.$appId,
								"encryptedData": res.encryptedData,
								"iv": res.iv,
								"signature": res.signature,
								"sessionKey": data.sessionKey,
							}
						}).then(res => {
							that.$store.state.wxNickName = res.data
							that.$store.state.token = res.data.tokenInfo.tokenValue
							uni.setStorageSync("token", res.data.tokenInfo.tokenValue)
							that.$api.request({
								url: that.$api.appPv,
							})
							that.getUserId();
						}).finally(() => {
							wx.hideLoading()
						})
					}
				})
			},
			getUserId() {
				let that = this;
				this.$api.request({
					url: this.$api.getInfo,
				}).then(res => {
					that.info = res.data
					that.$store.state.userId = res.data.id;
					uni.setStorageSync("userId", res.data.id);
					if (res.data.code) {
						uni.setStorageSync("myPartnerCode", res.data.code);
					}
					if (res.data.cityName) {
						uni.setStorageSync("myCityName", res.data.cityName);
					}
					if (res.data.userType) {
						uni.setStorageSync("myUserType", res.data.userType);
					}
					let obj = {
						name: this.name,
						avatar: this.avatar,
						mobile: this.mobile
					}
					this.$api.request({
						url: this.$api.updateUser,
						method: "POST",
						data: obj
					}).then(res => {
						uni.navigateBack();
					})
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.login {
		//padding: 30rpx 30rpx;
		//flex-direction: column;
		//justify-content: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		max-height: 100vh;
		background-color: #fff;
		min-height: 100vh;

		.avatar {
			border-radius: 10rpx;
			text-align: center;
			width: 200rpx;
			margin-top: 79rpx;
			height: 200rpx;
		}

		.form {
			margin-top: 62rpx;
			height: 300rpx;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				margin: 40rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #c7c7c7;

				.left {
					width: 140rpx;
					height: 50rpx;
					font-size: 36rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #1A1A1A;
					line-height: 42rpx;
					//-webkit-background-clip: text;
					//-webkit-text-fill-color: transparent;
				}

				.right {
					display: flex;
					align-items: center;

					text {
						width: 64rpx;
						height: 40rpx;
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #8A8A8A;
						line-height: 40rpx;
						//-webkit-background-clip: text;
						//-webkit-text-fill-color: transparent;
					}

					image {
						height: 30rpx;
						width: 30rpx;
					}

					.inputName {
						//margin-right: -110rpx;
						padding-right: 20rpx;
					}
				}
			}
		}

		.button {
			margin-top: 200rpx;
			width: 356rpx;
			height: 88rpx;
			background: #07C160;
			box-shadow: 3rpx 3rpx 6rpx 0rpx rgba(54, 81, 63, 0.25);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			opacity: 1;
		}

		.private {
			display: flex;
			//flex-direction: column;
			//align-items: center;
			justify-content: center;
			margin-top: 600rpx;
			width: 500rpx;
			height: 120rpx;

			.radio {
				width: 50rpx;
				height: 50rpx;
			}

			.check {
				padding-top: 10rpx;
				text-align: center;
				width: 160rpx;
				height: 64rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				color: #1A1A1A;
				margin: 0;
				padding-left: 0;
				line-height: 34rpx;
				-webkit-background-clip: text;
			}
		}
	}
</style>